<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>商品的页面</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
</head>
<head>
  <meta charset="utf-8" />
  <title>购物车</title>
  <style>
    *{
      padding:0;
      margin:0;
      list-style:none;
    }
    a{
      color:blue;
    }
    ._hidd{
      display:none;
    }
    ul{
      width:800px;
      margin-left:auto;
      margin-right:auto;
      border:1px solid #DFDFDF;
      border-bottom:none;
    }
    li{
      border-bottom:1px solid #DFDFDF;
      width:800px;
      margin-left:auto;
      margin-right:auto;
    }
    span{
      text-align:center;
    }
    .listShow{
      user-select:none;
    }
    .btnSub,.btnStop{
      width:80px;
      height:28px;
      background-color:#EBEBEB;
      border:1px solid #ccc;
      margin-left:20px;
    }
    .btnSub:active,.btnStop:active{
      background-color:#39C;
    }
    .sel{
      width:80px;
      height:25px;
      border:1px solid #ccc;
    }
    .txtName{
      width:120px;
      height:20px;
      border:1px solid #ccc;
    }
    .numInput{
      width:50px;
      height:20px;
      border:1px solid #ccc;
    }
    .tips{
      width:800px;
      height:35px;
      text-align:center;
      margin:auto;
    }
    .inputAll{
      width:800px;
      height:60px;
      margin:auto;
      margin-top:50px;
    }
    .th_listTop{
      width:800px;
      height:50px;
      margin:auto;
      background-color:#EBEBEB;
    }
    .td_list{
      width:800px;
      height:50px;
      margin:auto;
    }
    .th_liCat{
      float:left;
      width:150px;
      height:50px;
      text-align:center;
      line-height:50px;
    }
    .th_No{
      float:left;
      width:100px;
      height:50px;
      text-align:center;
      line-height:50px;
    }
    .th_liName{
      float:left;
      width:250px;
      height:50px;
      text-align:center;
      line-height:50px;
    }
    .th_listNum{
      float:right;
      width:200px;
      height:50px;
      text-align:center;
      line-height:50px;
    }
    .th_delete{
      float:right;
      width:100px;
      height:50px;
      text-align:center;
      line-height:50px;
    }
    .td_No{
      float:left;
      width:100px;
      height:50px;
      text-align:center;
      line-height:50px;
    }
    .td_liCat{
      float:left;
      width:150px;
      height:50px;
      text-align:center;
      line-height:50px;
    }
    .td_liName{
      float:left;
      width:250px;
      height:50px;
      text-align:center;
      line-height:50px;
    }
    .td_listNum{
      float:right;
      width:200px;
      height:50px;
      text-align:center;
      line-height:50px;
    }
    .td_delete{
      float:right;
      width:100px;
      height:50px;
      text-align:center;
      line-height:50px;
    }
    .c_num{
      margin-left:auto;
      margin-right:auto;
    }
    .plus,.minus{
      width:15px;
      height:15px;
      cursor:default;
    }
  </style>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(e) {
      //1 提交功能
      $(".btnSub").click(function(){
        //获取选中的商品类型
        var cat = $(".sel").val();
        //获取填入的商品名称
        var name = $(".txtName").val();
        //判断商品名称是否输入
        if(name.length<1){
          //商品名称如果未输入，弹出提示框
          alert("请输入商品名称！");
          //焦点回到商品名称输入框
          $(".txtName").focus();
          //跳出事件，不做接下来提交步骤
          return false;
        }
        //获取填写的商品数量
        var num = $(".numInput").val();
        //如果商品数量未填写，或者填写非数字格式都将取不到长度
        if(num.length<1){
          //商品数量没有取到值，弹出提示框
          alert("请输入商品数量！");
          //清空商品数量输入框的内容（因为有可能输入的是非数字符号，比如文字）
          $(".numInput").val("")
          //焦点回到商品数量输入框
          $(".numInput").focus();
          //跳出事件，不做接下来提交步骤
          return false;
        }
        //如果填写的商品数量>9999,让用户重新输入一个9999以下的数字
        else if(num>9999){
          alert("商品数量只支持9999以下！");
          $(".numInput").val("")
          //焦点回到商品数量输入框
          $(".numInput").focus();
          //跳出事件，不做接下来提交步骤
          return false;
        }
        //获取当前商品列表中最后一行非标题、非隐藏li的商品序号
        var no = $("ul li:not('._hidd,.th_li'):last .td_No").text();
        //如果当前商品列表没有数据，则将初始值no赋值为0
        //**如果不做这步判断赋值操作，当删完所有列表后再做添加操作，序号会取不到
        if($("ul li:not('.th_li,._hidd')").length<1)
        {
          no=0;
        }
        //复制一个空白li
        var product = $("._hidd").clone();
        //将空白li插入ul最下面一行
        $("ul").append(product);
        //把商品类型赋值到li里面的商品类型div上
        $("ul li:last .td_liCat").text(cat);
        //把商品名称赋值到li里面的商品名称div上
        $("ul li:last .td_liName").text(name);
        //把商品数量赋值到li里面的商品数量div上
        $("ul li:last .c_num").text(num);
        //把商品序号+1赋值到li里面的序号div上
        $("ul li:last .td_No").text(parseInt(no)+1);
        //移除隐藏标记的类名
        $("ul li:last").removeClass("_hidd");
        //给新增的li添加类名show
        $("ul li:last").addClass("show");
        //商品名称恢复默认选中状态
        $(".sel").val("手机");
        //清空商品规格输入框
        $(".txtName").val("");
        //清空商品数量输入框
        $(".numInput").val("");
        //焦点回到商品名称输入框
        $(".txtName").focus();
      });
      //2 商品列表中数量加1操作
      $("ul").on("click",".plus",function(){
        //先取到该行当前的商品数量值
        var num = $(this).next(".c_num").text();
        //如果当前数量值小于9999，则继续做+1操作
        if(num<9999)
        {
          $(this).next(".c_num").text(parseInt(num)+1);
        }
        //如果当前数值已经是9999了，则弹出提示不允许继续做+1操作
        else
        {
          alert("商品数量不能大于9999！");
        }
      });
      //3 商品列表中数量减1操作
      $("ul").on("click",".minus",function(){
        //先取到该行当前的商品数量值
        var num = $(this).prev(".c_num").text();
        //如果当前数量值大于1，则继续做-1操作
        if(num>1)
        {
          $(this).prev(".c_num").text(parseInt(num)-1);
        }
        //如果当前数量值已经是1了，则弹出提示不允许继续做-1操作
        else
        {
          alert("商品数量不能小于1！");
        }
      });
      //4 hover事件做鼠标进入、离开商品名称和商品数量输入框背景色变色效果
      $(".txtName,.numInput").hover(
              //鼠标进入时，选中的输入框背景色改变
              function(){
                $(this).css("background-color","#FC3");
              },
              //鼠标离开时，选中的输入框背景色恢复白色
              function(){
                $(this).css("background-color","white");
              }
      );
      //5 用on给动态添加的li绑定鼠标进入背景色改变事件
      //6 用on给动态添加的li绑定鼠标移出背景色恢复白色事件
      $("ul").on("mouseover mouseout",".show",function(e){
        if(e.type=="mouseover")
        {
          $(this).css("background-color","#FFC");
        }
        else
        {
          $(this).css("background-color","white");
        }
      });
      //7 点击删除按钮，将商品列表中的该行移除（因为有动态生成的li，所以事件也只能用on来绑定）
      $("ul").on("click",".td_delete a",function(){
        //7.1 移除删除按钮对应行
        $(this).parent(".td_delete").parent(".td_list").parent("li").remove();

        //7.2 序号列重新排序

        //先判断当前ul中商品列表显示出来的共有几行商品明细
        var count = $("ul li:not('.th_li,._hidd')").length;
        //如果明细行数量>0,则重新排序号；else则表示已经没有显示的明细行不需要重新排序
        if(count>0)
        {
          //从0开始直到最后一行，进行for循环赋值操作
          for(var i=0;i<count;i++)
          {
            //给明细列表中每一行对应的序号赋值为当前index+1
            $("ul .show .td_No").eq(i).text(i+1);
          }
        }
      });
      //8 点击禁止删除按钮，商品列表中的“删除”将不可用
      $(".btnStop").click(function(){
        //8.1 先判断当前商品列表是否有商品，若没有，则不操作
        if($("ul .show").length<1)
        {
          alert("当前商品列表没有商品，请先添加！");
          return false;
        }

        //8.2 如果按钮值为“禁止删除”，则做禁止操作
        //    并将明细列表中的删除按键的a标签颜色变为灰，原禁止删除按钮变为“恢复删除”
        if($(this).val()=="禁止删除")
        {
          //解除绑定的on事件，用对应的off
          $("ul").off("click",".td_delete a");
          //“删除”按键的a标签颜色变灰
          $(".td_delete a").css("color","#E3E3E3");
          //禁止删除按钮的value值变为“恢复删除”
          $(".btnStop").val("恢复删除");
        }
                //8.3 如果按钮值为“恢复删除”，则做恢复操作
        //    并将明细列表中的“删除”按键的a标签变回蓝色，原恢复删除按钮变为“禁止删除”
        else
        {
          //重新做一次on绑定事件（重复步骤7）
          $("ul").on("click",".td_delete a",function(){
            //移除操作
            $(this).parent(".td_delete").parent(".td_list").parent("li").remove();

            //先判断当前ul中商品列表显示出来的共有几行商品明细
            let count = $("ul li:not('.th_li,._hidd')").length;
            //如果明细行数量>0,则重新排序号；else则表示已经没有显示的明细行不需要重新排序
            if(count>0)
            {
              //从0开始直到最后一行，进行for循环赋值操作
              for(let i=0;i<count;i++)
              {
                //给明细列表中每一行对应的序号赋值为当前index+1
                $("ul .show .td_No").eq(i).text(i+1);
              }
            }
          });
          //“删除”按键的a标签颜色恢复为蓝色
          $(".td_delete a").css("color","blue");
          //恢复删除按钮的value值变为“禁止删除”
          $(".btnStop").val("禁止删除");
        }
      });
      //9 给body绑定只执行一次的one事件
      $("body").one("click",function(){
        alert("欢迎来到购物车功能页面！");
      });
    });
  </script>
</head>
<body>
<div class="tips">
  <h1>购物车添加删除功能</h1>
</div>
<div class="inputAll">
  <span>商品类型:</span>
  <select id="catList" class="sel">
    <option value="手机" selected="selected">手机</option>
    <option value="电脑">电脑</option>
    <option value="单反">单反</option>
  </select>
  <span>商品名称:</span>
  <input type="text" maxlength="10" class="txtName"/>
  <span>商品数量:</span>
  <input type="number" min="1" max="9999" maxlength="4" class="numInput"/>
  <input type="button" value="提交商品" class="btnSub" />
  <input type="button" value="禁止删除" class="btnStop" />
</div>
<div class="listShow">
  <ul>
    <li class="th_li">
      <div class="th_listTop">
        <div class="th_No">序号</div>
        <div class="th_liCat">商品类型</div>
        <div class="th_liName">商品名称</div>
        <div class="th_delete"></div>
        <div class="th_listNum">商品数量</div>
      </div>
    </li>
    <li class="_hidd">
      <div class="td_list">
        <div class="td_No">序号_隐藏</div>
        <div class="td_liCat">商品类型_隐藏</div>
        <div class="td_liName">商品名称_隐藏</div>
        <div class="td_delete"><a href="#">删除</a></div>
        <div class="td_listNum">
          <span class="plus">+</span>
          <span class="c_num">1</span>
          <span class="minus">-</span>
        </div>
      </div>
    </li>
    <li class="show">
      <div class="td_list">
        <div class="td_No">1</div>
        <div class="td_liCat">手机</div>
        <div class="td_liName">华为Mate10</div>
        <div class="td_delete"><a href="#">删除</a></div>
        <div class="td_listNum">
          <span class="plus">+</span>
          <span class="c_num">20</span>
          <span class="minus">-</span>
        </div>
      </div>
    </li>
  </ul>
</div>
</body>
</html>